<form class="form-horizontal" name="registryFormAzure" ng-submit="$ctrl.formAction()">
  <div class="col-sm-12 form-section-title">
    Azure registry details
  </div>
  <!-- name-input -->
  <div class="form-group">
    <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
    <div class="col-sm-9 col-lg-10">
      <input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="my-azure-registry" required auto-focus />
    </div>
  </div>
  <div class="form-group" ng-show="registryFormAzure.registry_name.$invalid">
    <div class="col-sm-12 small text-warning">
      <div ng-messages="registryFormAzure.registry_name.$error">
        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
      </div>
    </div>
  </div>
  <!-- !name-input -->
  <!-- url-input -->
  <div class="form-group">
    <label for="registry_url" class="col-sm-3 col-lg-2 control-label text-left">
      Registry URL
      <portainer-tooltip position="bottom" message="URL of an Azure Container Registry. Any protocol will be stripped."></portainer-tooltip>
    </label>
    <div class="col-sm-9 col-lg-10">
      <input type="text" class="form-control" id="registry_url" name="registry_url" ng-model="$ctrl.model.URL" placeholder="myproject.azurecr.io" required />
    </div>
  </div>
  <div class="form-group" ng-show="registryFormAzure.registry_url.$invalid">
    <div class="col-sm-12 small text-warning">
      <div ng-messages="registryFormAzure.registry_url.$error">
        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
      </div>
    </div>
  </div>
  <!-- url-input -->
  <!-- credentials-user -->
  <div class="form-group">
    <label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left">Username</label>
    <div class="col-sm-9 col-lg-10">
      <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required />
    </div>
  </div>
  <div class="form-group" ng-show="registryFormAzure.registry_username.$invalid">
    <div class="col-sm-12 small text-warning">
      <div ng-messages="registryFormAzure.registry_username.$error">
        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
      </div>
    </div>
  </div>
  <!-- !credentials-user -->
  <!-- credentials-password -->
  <div class="form-group">
    <label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left">Password</label>
    <div class="col-sm-9 col-lg-10">
      <input type="password" class="form-control" id="registry_password" name="registry_password" ng-model="$ctrl.model.Password" required />
    </div>
  </div>
  <div class="form-group" ng-show="registryFormAzure.registry_password.$invalid">
    <div class="col-sm-12 small text-warning">
      <div ng-messages="registryFormAzure.registry_password.$error">
        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
      </div>
    </div>
  </div>
  <!-- !credentials-password -->
  <!-- actions -->
  <div class="col-sm-12 form-section-title">
    Actions
  </div>
  <div class="form-group">
    <div class="col-sm-12">
      <button type="submit" class="btn btn-primary btn-sm" ng-disabled="$ctrl.actionInProgress || !registryFormAzure.$valid" button-spinner="$ctrl.actionInProgress">
        <span ng-hide="$ctrl.actionInProgress">{{ $ctrl.formActionLabel }}</span>
        <span ng-show="$ctrl.actionInProgress">In progress...</span>
      </button>
    </div>
  </div>
  <!-- !actions -->
</form>
